<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户下单</span>
      </div>
      <!-- 服务选择部分 -->
      <div class="service-selection">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-menu default-active="-1" class="el-menu-vertical-demo" @select="handleFirstMenuSelect">
              <el-menu-item index="-1">
                <span slot="title">所有服务</span>
              </el-menu-item>
              <el-menu-item v-for="service in firstLevelServices" :key="service.id" :index="String(service.id)">
                <span slot="title">{{ service.firstLevelTitle }}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="18">
            <div class="service-list-container">
              <el-tabs v-model="activeSecondaryTab" @tab-click="handleSecondaryTabClick">
                <el-tab-pane label="所有二级分类" name="-1">
                  <el-row :gutter="20">
                    <el-col :span="8" v-for="service in filteredServices" :key="service.id">
                      <el-card :body-style="{ padding: '0px' }" class="service-card" @click.native="selectService(service)" :class="{'selected-card': selectedService && selectedService.id === service.id}">
                        <img :src="service.image" class="service-image">
                        <div style="padding: 14px;">
                          <span>{{ service.cleaningTitle }}</span>
                          <div class="bottom">
                            <span class="price">¥{{ service.price }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane v-for="category in secondaryCategories" :key="category.id" :label="category.secondaryLevelTitle" :name="String(category.id)">
                  <el-row :gutter="20">
                    <el-col :span="8" v-for="service in filteredServices" :key="service.id">
                      <el-card :body-style="{ padding: '0px' }" class="service-card" @click.native="selectService(service)" :class="{'selected-card': selectedService && selectedService.id === service.id}">
                        <img :src="service.image" class="service-image">
                        <div style="padding: 14px;">
                          <span>{{ service.cleaningTitle }}</span>
                          <div class="bottom">
                            <span class="price">¥{{ service.price }}</span>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listCleaningList } from "@/api/order/takeOrders";

export default {
  name: "TakeOrders",
  data() {
    return {
      firstLevelServices: [], // 一级服务列表
      allServices: [], // 所有服务列表
      filteredServices: [], // 过滤后的服务列表
      activeFirstMenuId: -1, // 当前选中的一级菜单ID
      selectedService: null, // 选中的服务
      activeSecondaryTab: '-1', // 当前选中的二级菜单
      secondaryCategories: [] // 二级分类列表
    };
  },
  created() {
    this.getServices();
  },
  methods: {
    // 获取服务列表
    async getServices() {
      try {
        const response = await listCleaningList({});
        const rawServices = response || [];
        const firstLevelCategories = [];
        const allSecondaryCategories = [];
        const actualServices = [];
        rawServices.forEach(item => {
          if (item.parentLabel === 0 && item.cleaningLabel) {
            firstLevelCategories.push({
              id: item.id,
              firstLevelTitle: item.cleaningLabel
            });
          } else if (item.parentLabel !== 0 && item.cleaningTitle) {
            actualServices.push(item);
            const existingSecondaryCategory = allSecondaryCategories.find(cat => cat.id === item.parentLabel);
            if (!existingSecondaryCategory) {
              allSecondaryCategories.push({
                id: item.parentLabel,
                secondaryLevelTitle: item.parentLabelName
              });
            }
          }
        });
        this.firstLevelServices = firstLevelCategories;
        this.allServices = actualServices;
        this.filteredServices = actualServices;
        this.secondaryCategories = allSecondaryCategories;
      } catch (error) {
        console.error("获取服务列表失败:", error);
        this.$message.error("获取服务列表失败");
      }
    },
    // 处理一级菜单选择
    async handleFirstMenuSelect(key) {
      this.activeFirstMenuId = parseInt(key);
      this.activeSecondaryTab = '-1';
      await this.filterServices();
    },
    // 统一的服务过滤方法
    async filterServices() {
      let servicesToFilter = this.allServices;
      if (this.activeFirstMenuId !== -1) {
        servicesToFilter = servicesToFilter.filter(service => service.parentLabel === this.activeFirstMenuId);
      }
      if (this.activeSecondaryTab !== '-1') {
        servicesToFilter = servicesToFilter.filter(service => service.parentLabel === parseInt(this.activeSecondaryTab));
      }
      this.filteredServices = servicesToFilter;
    },
    // 选择服务
    selectService(service) {
      this.selectedService = service;
      this.$message.success("已选择服务：" + service.cleaningTitle);
    },
    // 处理二级菜单选择
    handleSecondaryTabClick(tab) {
      this.activeSecondaryTab = tab.name;
      this.filterServices();
    }
  }
};
</script>

<style scoped>
.service-selection {
  margin-bottom: 20px;
}
.menu-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #303133;
}
.service-list-container {
  padding-top: 10px;
}
.service-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}
.service-card.selected-card {
  border: 2px solid #409EFF;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.service-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}
</style>
